<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>管理-管理系统</title>
	<meta name="keywords" content="管理系统">
	<meta name="description" content="管理系统">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>
	<div>
		<div style="padding:20px; background-color: #F2F2F2;">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-header"></div>
							<div class="archives">
								<div id="main1" style="width: 100%; height: 350px;"></div>
							</div>
						</div>
					</div>
				</div>
		</div>					
		
	</div>
</body>
 
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/public.js" charset="utf-8"></script>
<script src="../../dist/echarts.min.js"></script>
<script>
layui.use(['table','laydate'], function(){
	var table = layui.table;
	var $ = layui.jquery;
	var form = layui.form;
	var laydate = layui.laydate;
	var autoRequestTimer;
	
	var myChart1 = echarts.init(document.getElementById('main1'));

	queryListLevel();
	autoRequestTimer = setInterval(queryListLevel, 20000); // 20000毫秒=20秒

	//日期选择器
	laydate.render({
	  elem: '#arrears_date'
	  ,type: 'date' //默认，可不填
	 ,trigger: 'click'
	});

	//重载表格
	$('.btnSearch').on('click',function(){
		var arrears_date = $('#arrears_date').val();
		queryListLevel(arrears_date);
	});

	function queryListLevel(times){
		$.ajax({
			url:'/realTime/query_parent_satisfaction_dist',
			type:'get',
			data:{},//JSON.stringify({"state":"1","arrears_date":times})
			dataType:"json",//数据类型,
			contentType: 'application/json',
			beforeSend:function(){
				//do something
			},
			success:function(data){
				//do something
				if(data.code==0){
					var option = {
						title: {
							text: '统计家长满意度分布',
							left: 'center'
						},
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left'
						},
						series: [
							{
								name: '数量',
								type: 'pie',
								radius: '50%',
								data: data.data,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};
					myChart1.setOption(option);
				} else {
					$('.tips').text('* 账号与密码不匹配，请重新输入');
				}
			},
			error:function(data){
				//do something
				layer.msg('与服务器连接失败,请稍后登录',{icon: 2});
			}
		});
	};

	// 清理定时器
	window.onunload = function() {
		clearInterval(autoRequestTimer);
	};
});
</script>
</html>